<template>
    <div class="traffic">
        <img src="../../static/img/common/hideImg.png" class="hideImg" @click="changeShow">
        <div class="left" v-show="showHide">
            <div class="markBg">
                <div class="title">停车场车位统计</div>
                <div class="parkNumBox">
                    <div class="parkNumItem">
                        <div class="top">
                            <span>{{sunNums.nowDayEnterTotalNum | toMillion}}</span>
                            <u>辆</u>
                        </div>
                        <div class="bottom">今日累计进场量</div>
                    </div>
                    <div class="parkNumItem">
                        <div class="top">
                            <span>{{sunNums.nowMonthEnterTotalNum | toMillion}}</span>
                            <u>辆</u>
                        </div>
                        <div class="bottom">本月累计进场量</div>
                    </div>
                </div>
                <div class="parkNumBox">
                    <div class="parkNumItem">
                        <div class="top">
                            <span>{{sunNums.enterTotalNum | toMillion}}</span>
                            <u>辆</u>
                        </div>
                        <div class="bottom">总累计进场量</div>
                    </div>
                    <div class="parkNumItem">
                        <div class="top">
                            <span>{{rateDates.totalTurnoverRate}}</span>
                        </div>
                        <div class="bottom">停车场周转率</div>
                    </div>
                </div>
                <div class="roundBox">
                    <div>
                        <div id="leftChatrs1"></div>
                        <div class="leftChatrsText">普通车位周转率</div>
                    </div>
                    <div class="textLine">
                        <div class="lineItem">
                            <span>普通车车位</span>
                            <div>
                                <u v-if="carsStop">{{carsStop.privatePlateTotalNum == null ? '' : carsStop.privatePlateTotalNum}}</u>
                                <span>个</span>
                            </div>
                        </div>
                        <div class="lineItem">
                            <span>普通车占用车位</span>
                            <div>
                                <u v-if="carsStop">{{carsStop.privatePlateUseNum == null ? '' : carsStop.privatePlateUseNum}}</u>
                                <span>个</span>
                            </div>
                        </div>
                        <div class="lineItem">
                            <span>普通车空余车位</span>
                            <div>
                                <u v-if="carsStop" class="colorYellow">{{carsStop.privatePlateFreeNum == null ? '' : carsStop.privatePlateFreeNum}}</u>
                                <span>个</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="roundBox">
                    <div>
                        <div id="leftChatrs2"></div>
                        <div class="leftChatrsText">大巴车位周转率</div>
                    </div>
                    <div class="textLine">
                        <div class="lineItem">
                            <span>大巴车车位</span>
                            <div>
                                <u v-if="carsStop">{{carsStop.busPlateTotalNum == null ? '' : carsStop.busPlateTotalNum}}</u>
                                <span>个</span>
                            </div>
                        </div>
                        <div class="lineItem">
                            <span>大巴车占用车位</span>
                            <div>
                                <u v-if="carsStop">{{carsStop.busPlateUseNum == null ? '' : carsStop.busPlateUseNum}}</u>
                                <span>个</span>
                            </div>
                        </div>
                        <div class="lineItem">
                            <span>大巴车空余车位</span>
                            <div>
                                <u v-if="carsStop" class="colorYellow">{{carsStop.busPlateFreeNum == null ? '' : carsStop.busPlateFreeNum}}</u>
                                <span>个</span>
                            </div>
                        </div>
                    </div>
                </div>
                <hr/>
                <div class="title title2" @click="openWindow">车辆来源地排行<i class="threeBar" title="打开车辆来源地排行TOP15"></i></div>
                <div class="lineTitle">
                    <span>今日车辆来源排行TOP6</span>
                    <div>
                        <span class="emptyLine" style="width: 170px;"></span>
                        <!--<img src="../../static/img/common/dottedLine.png">-->
                        <img src="../../static/img/common/dian.png" class="dian">
                    </div>
                </div>
                <div class="topCharts">
                    <div id="dayTop6" style="width: 100%;height: 100%;"></div>
                </div>
                <div class="lineTitle">
                    <span>本月车辆来源排名TOP6</span>
                    <div>
                        <span class="emptyLine" style="width: 170px;"></span>
                        <!--<img src="../../static/img/common/dottedLine.png">-->
                        <img src="../../static/img/common/dian.png" class="dian">
                    </div>
                </div>
                <div class="topCharts">
                    <div id="monthTop6" style="width: 100%;height: 100%;"></div>
                </div>
            </div>
        </div>
        <div class="bottomBox" v-show="showHide">
            <div class="markBg">
                <div class="monthBox">
                    <div class="title">今月进场出场车辆趋势</div>
                    <div class="chartBox">
                        <div id="monthTrend" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
                <div class="todayBox">
                    <div class="title">今日各时段出场入场趋势</div>
                    <div class="chartBox">
                        <div id="dayTrend" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="left" v-show="!showHide">
            <div class="markBg">
                <div class="title title3">园区无人车</div>
                <div class="impBus">
                    <div style="text-align: center;width: 91px;">
                        <div class="roundBg">
                            <span>{{npPeopleBusDatas.executeCarSum}}</span>
                            <u>辆</u>
                        </div>
                        <span class="roundBgText">执行车辆</span>
                    </div>
                    <div class="roundWrap">
                        <div class="roundItem">
                            <div>
                                <span class="nums">{{npPeopleBusDatas.carSum}}</span><u>辆</u>
                            </div>
                            <div>
                                <img src="../../static/img/common/fangdian.png">
                                <span>车辆总数</span>
                            </div>
                        </div>
                        <div class="roundItem">
                            <div>
                                <span class="nums">{{npPeopleBusDatas.executeCarSum}}</span><u>辆</u>
                            </div>
                            <div>
                                <img src="../../static/img/common/fangdian.png">
                                <span>在线车辆</span>
                            </div>
                        </div>
                        <div class="roundItem">
                            <div>
                                <span class="nums">{{npPeopleBusDatas.leisureCaeSum}}</span><u>辆</u>
                            </div>
                            <div>
                                <img src="../../static/img/common/fangdian.png">
                                <span>空闲车辆</span>
                            </div>
                        </div>
                        <div class="roundItem">
                            <div>
                                <span class="nums numsBroken">{{npPeopleBusDatas.falutCarSum}}</span><u>辆</u>
                            </div>
                            <div>
                                <img src="../../static/img/common/fangdian.png">
                                <span>故障车辆</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lineTitle">
                    <span>今日值班人员表</span>
                    <div>
                        <span class="emptyLine" style="width: 220px;"></span>
                        <!--<img src="../../static/img/common/dottedLine.png" style="width: 230px;">-->
                        <img src="../../static/img/common/dian.png" class="dian">
                    </div>
                </div>
                <div class="peoplesBox">
                    <!--<div class="duty clearfix">-->
                        <!--<span class="duty1 duty2 fl">负责人</span>-->
                        <!--<u class="fl">张三</u>-->
                    <!--</div>-->
                    <div class="duty clearfix" style="margin: 20px 0 15px 0;">
                        <span class="duty1 fl" style="height: 38px">值班人员</span>
                        <div class="fl dutyPersonBox">
                            <u v-for="(item,index) in busPerson1" :key="index">{{item.userName}}</u>
                        </div>
                    </div>
                </div>
                <div class="lineTitle">
                    <span>园区无人车时刻表</span>
                    <div>
                        <span class="emptyLine" style="width: 210px;"></span>
                        <!--<img src="../../static/img/common/dottedLine.png" style="width: 230px;">-->
                        <img src="../../static/img/common/dian.png" class="dian">
                    </div>
                </div>
                <Station v-bind:fatherDatas="stationDatas" style="margin: 20px 0;"></Station>
                <div class="title title4">园区观光车</div>
                <div class="impBus">
                    <div style="text-align: center;width: 91px;">
                        <div class="roundBg">
                            <span>{{playBusDatas.executeCarSum}}</span>
                            <u>辆</u>
                        </div>
                        <span class="roundBgText">执行车辆</span>
                    </div>
                    <div class="roundWrap">
                        <div class="roundItem">
                            <div>
                                <span class="nums">{{playBusDatas.carSum}}</span><u>辆</u>
                            </div>
                            <div>
                                <img src="../../static/img/common/fangdian.png">
                                <span>车辆总数</span>
                            </div>
                        </div>
                        <div class="roundItem">
                            <div>
                                <span class="nums">{{playBusDatas.executeCarSum}}</span><u>辆</u>
                            </div>
                            <div>
                                <img src="../../static/img/common/fangdian.png">
                                <span>在线车辆</span>
                            </div>
                        </div>
                        <div class="roundItem">
                            <div>
                                <span class="nums">{{playBusDatas.leisureCaeSum}}</span><u>辆</u>
                            </div>
                            <div>
                                <img src="../../static/img/common/fangdian.png">
                                <span>空闲车辆</span>
                            </div>
                        </div>
                        <div class="roundItem">
                            <div>
                                <span class="nums numsBroken">{{playBusDatas.falutCarSum}}</span><u>辆</u>
                            </div>
                            <div>
                                <img src="../../static/img/common/fangdian.png">
                                <span>故障车辆</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lineTitle">
                    <span>今日值班人员表</span>
                    <div>
                        <span class="emptyLine" style="width: 220px;"></span>
                        <!--<img src="../../static/img/common/dottedLine.png" style="width: 230px;">-->
                        <img src="../../static/img/common/dian.png" class="dian">
                    </div>
                </div>
                <div class="peoplesBox">
                    <!--<div class="duty clearfix">-->
                        <!--<span class="duty1 duty2 fl">负责人</span>-->
                        <!--<u class="fl">张三</u>-->
                    <!--</div>-->
                    <div class="duty clearfix" style="margin: 20px 0 15px 0;">
                        <span class="duty1 fl" style="height: 38px">值班人员</span>
                        <div class="fl dutyPersonBox">
                            <u v-for="(item,index) in busPerson2" :key="index">{{item.userName}}</u>
                        </div>
                    </div>
                </div>
                <div class="lineTitle">
                    <span>园区观光车时刻表</span>
                    <div>
                        <span class="emptyLine" style="width: 210px;"></span>
                        <!--<img src="../../static/img/common/dottedLine.png" style="width: 230px;">-->
                        <img src="../../static/img/common/dian.png" class="dian">
                    </div>
                </div>
                <Station v-bind:fatherDatas="stationBusDatas" style="margin: 20px 0;"></Station>
            </div>
        </div>
        <!--页面弹窗-->
        <div class="alertWindow" v-show="alertWindowShow" ref="windowBox">
            <div class="title">车辆来源地排行TOP15</div>
            <div class="windowBox clearfix">
                <span class="closeWindow" @click="closeWindow" title="关闭车辆来源地排行TOP15"></span>
                <div class="tabs clearfix">
                    <span :class="{ spanActive : spanActive == 1 }" @click="changeDates(1)">今日</span>
                    <span :class="{ spanActive : spanActive == 2 }" @click="changeDates(2)">近七天</span>
                    <span :class="{ spanActive : spanActive == 3 }" @click="changeDates(3)">近三十天</span>
                </div>
                <div class="windowEchatrs" id="windowChart" style="width:1400px"></div>
            </div>
        </div>
        <!-- 全部点位信息 -->
        <all-marker ref="allMarker" :map-data="mapData"></all-marker>
    </div>
</template>
<script src="./traffic.js"></script>
<style lang="scss" src="./traffic.scss"></style>